<template>
  <div class="target-boost">
    <div v-if="!route.meta.showsReturn" class="tabs">
      <div
        class="tab"
        v-for="(tab, index) in tabs"
        :key="tab.name"
        @click="changeActive(tab, index)"
        :class="{ active: route.fullPath.includes(tab.path) }"
      >
        {{ tab.name }}
      </div>
    </div>
    <RouterView v-slot="{ Component }">
      <Transition name="fade-slide" appear mode="out-in">
        <component :is="Component" />
      </Transition>
    </RouterView>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'

import { postCollect } from '@/apis/assignment'

const route = useRoute()
const activePath = ref('target-error-questions')

const tabs = [
  {
    path: 'target-knowledge-point',
    name: '知识点靶向'
  },
  {
    path: 'personalize-target',
    name: '个性化靶向'
  },
  {
    path: 'target-error-questions',
    name: '错题靶向'
  }
]
const changeActive = tab => {
  activePath.value = tab.path
  router.push({ name: tab.path })
}

// 埋点操作
let lastActionTime = Date.now()
const actionCheckInterval = 5 * 60 * 1000 // 5分钟
const pointsInterval = 10 * 60 * 1000 // 10分钟
let isActive = true

function collect() {
  if (isActive) {
    postCollect({
      action_type: 5
    })
  }
}

function checkUserActivity() {
  if (Date.now() - lastActionTime > actionCheckInterval) {
    isActive = false
  } else {
    isActive = true
  }
}

function resetLastActionTime() {
  lastActionTime = Date.now()
  isActive = true
}

// 监听鼠标移动、点击、键盘事件
window.addEventListener('mousemove', resetLastActionTime)
window.addEventListener('click', resetLastActionTime)
window.addEventListener('keydown', resetLastActionTime)

// 每10分钟就执行一次埋点操作
setInterval(collect, pointsInterval)
// 每5分钟就检查一次用户是否活跃
setInterval(checkUserActivity, actionCheckInterval)
</script>
<style lang="less" scoped>
.target-boost {
  height: calc(100vh - 30px);
  overflow: hidden;

  .tabs {
    margin-bottom: 20px;
    height: 30px;
    display: flex;
    align-items: flex-end;
    gap: 55px;

    .tab {
      line-height: 24px;
      font-size: @size-nav2;
      color: #72757e;
      transition: all 0.1s;
      cursor: pointer;

      &:hover {
        font-weight: 700;
        color: @color-brand-checked;
      }
    }

    .active {
      line-height: 30px;
      font-size: @size-nav1;
      font-weight: 700;
      color: @color-brand-checked;
    }
  }

  .page-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;

    .btn-back {
      box-sizing: border-box;
      margin-right: 20px;
      border: 1px solid transparent;
      width: 52px;
      height: 34px;
      background-color: #fff;
      background-image: url(@/assets/images/target-boost/icon-back.svg);
      background-size: 16px 14px;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;

      &:hover {
        border-color: #b7b8bb;
      }
    }

    .page-title {
      font-size: 20px;
      font-weight: 700;
      color: #333;
    }
  }
}
</style>
